<template>
	<view>
		<view class="register-con flex align-center justify-between">
			<view></view>
			<view @click="toLogin">登录</view>
		</view>
		<view class="contenr flex flex-direction align-center">
			<view class="yanzheng flex align-center justify-between">
				<input placeholder="手机号" v-model="mobile"/>
				<view @tap='sendRegisterCode'>
					<text v-if="!isStopwatch">获取验证码</text>
					<text v-else>{{time}}S后重发</text></view>
			</view>
			<input placeholder="验证码" v-model="red_code"/>
			<input password placeholder="您的密码" v-model="password"/>
			<input password placeholder="确认密码" v-model="sec_password"/>
			<view class="xieyi flex align-center justify-center">
				<text>点击注册，表示同意</text>
				<text>《用户协议》</text>
			</view>
			<button class="flex align-center justify-center" @tap="login">
				<text @tap="login">立即登录</text>
				</button>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
			mobile:'',
			red_code:'',
			password:'',
			sec_password:'',
			code:'',
			wx_code:'',
			user:'',
			openId:'',
			isStopwatch: false,
			time: 60
			}
		},
		onLoad() {
			this.loginWx()
		},
		methods: {
			sendRegisterCode(){
				if(this.isStopwatch){
					uni.showToast({
						icon:'none',
						title:'60s后重试'
					})
					return;
				}
				if(!this.mobile){
					uni.showToast({
						icon:'none',
						title:'请输入手机号码'
					})
					return;
				}
				this.isStopwatch = true
				this.setMyTime();
				api.get({
					url: 'User/GetRegisterCode',
					data: {
						mobile: this.mobile
					},
					success: data => {
						console.info(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.code = data.Response.code
							uni.showToast({
								icon:'none',
								title:'已发送'
							})
						}
					}
				});
			},
			loginWx() {
				let _this = this;
				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(JSON.stringify(loginRes))
						let code = loginRes.code;
						_this.wx_code = code
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						// api.get({
						// 	url: 'User/GetOnLogin',
						// 	data: {
						// 		code: code
						// 	},
						// 	success: (res) => {
						// 		console.log('code:'+JSON.stringify(res))
						// 		if (res.ErrCode == 0) {
						// 			_this.openId = res.Response.openid
						// 		}
						// 	}
						// });
					},
				});
			},
			login(){
				if(!this.mobile){
					uni.showToast({
						icon:'none',
						title:'请输入手机号码'
					})
					return;
				}
				if(!this.red_code){
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
					return;
				}
				if(!this.password){
					uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
					return;
				}
				if(!this.sec_password){
					uni.showToast({
						icon:'none',
						title:'请输入确认密码'
					})
					return;
				}
				if(this.password != this.sec_password){
				uni.showToast({
					icon:'none',
					title:'两次输入密码不一致'
				})
				return;	
				}
				if(this.red_code != this.code){
				uni.showToast({
					icon:'none',
					title:'验证码错误'
				})
				return;	
				}
				api.get({
					url: 'User/GetRegister',
					data: {
						mobile: this.mobile,
						password:this.password,
						red_code:'',
						// wx_code:this.wx_code,
					},
					success: data => {
						console.info(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.setStorageSync('user', data.Response)
							//强制页面重载，跳转到首页
							uni.reLaunch({
								url: '/pages/index/index'
							});
							
						}
					}
				});
			},
			toLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			sms() {
				this.isStopwatch = true
				this.setMyTime();
			},
			setMyTime() {
				console.log(this.time)
				if (this.time > 0) {
					this.time = --this.time
					setTimeout(() => this.setMyTime(), 1000);
				} else {
					this.time = 60
					this.isStopwatch = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xieyi {
		font-size: 24upx;
		margin-bottom: 10upx;
	}
	.xieyi text:nth-child(1){
		color: #666666;
	}
	.xieyi text:nth-child(2){
		color: $btn-bground;
	}
	.register-con{
		padding: 0 30upx;
		box-sizing: border-box;
		height: 100upx;
	}
	.bottom text:nth-child(1),.bottom text:nth-child(4){
		color: #999999;
	}
	.bottom text:nth-child(3){
		font-size: 26upx;
		color: #000000;
	}
	.bottom image{
		width: 37upx;
		height: 30upx;
		margin-right: 16upx;
	}
	.bottom{
		margin-top: 80upx;
	}
	.zhaohui view{
		padding: 0 30upx;
		height: 26upx;
		margin-top: 50upx;
	}
	.zhaohui view:nth-child(1){
		border-right: 1upx solid #999999;
		font-size: 26upx;
		color: #444444;
		line-height: 36upx;
	}
	.contenr button{
		margin-top: 10upx;
		width: 660upx;
		height: 72upx;
		background-color: $btn-bground;
		border-radius: 35upx;
		padding: 0;
	}
	.contenr button text{
		font-size: 28upx;
		color: #ffffff;
	}
	.yanzheng input{
		width: 459upx;
		height: 70upx;
		background-color: #f5f5f5;
		border-radius: 35upx;
		padding-left: 42upx;
	}
	.yanzheng view{
		width: 180upx;
		height: 70upx;
		border-radius: 35upx;
		border: solid 1upx $btn-bground;
		text-align: center;
		line-height: 70upx;
		font-size: 28upx;
		color: $btn-bground;
	}
	.yanzheng{
		width: 660upx;
		height: 70upx;
		margin-bottom: 30upx;
	}
	.contenr>input{
		width: 660upx;
		height: 70upx;
		background-color: #f0f0f0;
		border-radius: 35upx;
		padding-left: 42upx;
		margin-bottom: 30upx;
	}
	page{
		background-color: #fff;
	}

</style>
